<template>
    <div class="wapper">
        <van-nav-bar
            color="#666"
            class="bbottom _style-fs14"
            :title="thisOne.text"
            id="top"
        >
            <div slot="left" @click="$router.back()"><van-icon name="arrow-left" color="#bbb" class="lv2" size="6vw"/></div>
            <div slot="right" @click="$router.replace(that.link)" class="_style-fs13">{{that.text}}</div>
        </van-nav-bar>
        <div class="form-area" id="body">
            <van-form @submit="onSubmit">
                <van-divider>使用手机{{thisOne.text}}</van-divider>
                <van-field
                    v-model.trim="username"
                    name="username"
                    placeholder="请输入11位手机号码"
                    class="ipt"
                />
                <van-field
                    v-model.trim="password"
                    type="password"
                    name="password"
                    placeholder="请输入密码"
                    class="ipt"
                />
                <div>
                    <van-button class="submit" round block type="info" native-type="submit" :color="isAllEntry()?'#fe4070':'#feb2c5'">{{thisOne.text}}</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
    name: "form-user",
    data(){
        return {
            thisOne: {text:'登陆', link: '/login'},
            that: {text:'注册', link: '/register'},
            info: [{text:'登陆', link: '/login'}, {text:'注册', link: '/register'}],
            username: '',
            password: '',
            msg: '',
            i: 5 //延时时间
        }
    },
    methods: {
        ...mapActions('user', ['login', 'register']),
        ...mapMutations('user', ['setUsername', 'setToken', 'clearToken', 'SetLoginState']),
        onSubmit(values) {
            console.log('submit', values);
            let {username, password} = values
            if(username.length<=0 || password.length<=0 ){
                this.$toast('请输入完整信息')
                return false
            }
            this.username='';
            this.password='';
            if (this.$route.path === '/login') {
                this.login(values) // 登陆
            }
            if (this.$route.path === '/register') {
                console.log('register')
                this.register(values)
            }
        },
        isAllEntry(){
            return this.username.length > 0 && this.password.length > 0;

        }, // 是否输入数据
        login(values) {
            var _this = this
            this.axios.post('https://www.fastmock.site/mock/0fcda8fd40622d9d49aa173cc1fa5bd8/jumei/login',values)
                .then(res =>{
                    console.log(res.data)
                    if (res.data.error_code === 0) { // 登陆成功
                        this.setToken(res.data.data.token)
                        this.setUsername(res.data.data.username)
                        this.SetLoginState('true')
                        this.msg = '登陆成功'
                        const toast = this.$toast.success({
                            message: this.msg+this.i+'秒后返回',
                            duration: 0,
                            closeOnClick:true
                        })
                        const timer = setInterval(()=>{
                            this.i--
                            toast.message = this.msg+this.i+'秒后返回'
                            if (this.i <= 0){
                              clearInterval(timer)
                              _this.$router.back()
                              toast.clear()
                            }
                        }, 1000)
                    } else {
                        this.clearToken()
                        this.msg = '登陆失败'
                        this.$toast.fail(this.msg)
                    }
                })
                .catch(err => {
                    console.log(err)
                    this.clearToken()
                    this.msg = '登陆失败'
                    this.$toast.fail(this.msg)
                })
        }, // 登陆
        register(values) {
            var _this = this
            this.axios.post('https://www.fastmock.site/mock/0fcda8fd40622d9d49aa173cc1fa5bd8/jumei/register',values)
                .then(res =>{
                    console.log(res.data)
                    if (res.data.error_code === 0) {
                        this.setToken(res.data.data.token)
                        this.setUsername(res.data.data.username)

                        this.msg = '注册成功'
                        const toast = this.$toast.success({
                            message: this.msg+this.i+'秒后跳转登陆',
                            duration: 0,
                            closeOnClick:true
                        })
                        const timer = setInterval(()=>{
                            this.i--
                            toast.message = this.msg+this.i+'秒后跳转登陆'
                            if (this.i <= 0){
                                clearInterval(timer)
                                _this.$router.replace('/login')
                                toast.clear()
                            }
                        }, 1000)
                    } else {
                        this.msg = '注册失败'
                        this.$toast.fail(this.msg)
                    }
                })
                .catch(err => {
                    console.log(err)
                    this.clearToken()
                    this.msg = '注册失败'
                    this.$toast.fail(this.msg)
                })
        }, // 登陆
    },
    computed: {
        ...mapState('user',['token', 'isLogin'])
    },
    mounted() {
        console.log(this.$route.path)
        if (this.$route.path === this.that.link){
            [this.that, this.thisOne] = this.info
        }
    },
}
</script>

<style scoped lang="scss">
.wapper{
    height: 100vh;
}
#top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#body{
    height: 100vh;
    padding: 60px 40px;
    box-sizing: border-box;
    .ipt{
        margin-bottom: 20px;
        border-radius: 40px;
    }
    .submit{
        width: 100%;
    }
}
</style>
